<template>
    <div>
        <van-popup v-model:show="show" position="bottom" round=ture closeable  >
            <div class="pop">
                <div class="content">
                    <div class="all" :class="{ active:selectedId === 'all'}"  @click="chooseType({id:'all',name:'全部类型'})" >全部类型</div>
                    <div class="list">
                        <div class="title">支出</div>
                        <div class="exponse-wrap item">
                            <p v-for="item in expense" :key="item.id" @click="chooseType(item)" :class="{active:selectedId === item.id}">{{ item.name }}</p>
                        </div>
                        <div class="title">收入</div>
                        <div class="income-wrap item">
                            <p v-for="item in income" :key="item.id"  @click="chooseType(item)" :class="{active:selectedId === item.id}">{{ item.name }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { onMounted, ref,defineEmits } from 'vue'
import axios from '@/api/index.js';

const show = ref(false)
const expense = ref([])
const income = ref([])
const selectedId = ref('all')

const emit = defineEmits(['changeName'])

defineExpose({
  show
})

//获取所有的类型
onMounted(async()=> {
    const res = await axios.get('/api/type/list')
    console.log(res.data.list);

    expense.value = res.data.list.filter(item => item.type === '1')
    income.value = res.data.list.filter(item => item.type === '2')
})

const chooseType = (item) => {
    //console.log(item);

    emit('changeName', item)

    selectedId.value = item.id
    //console.log(selectedId.value);

}




</script>

<style lang="less" scoped>
.pop {
    max-height: 70vh;
    background-color: #f5f5f5;
    .content {
        font-size: 16px;
        padding: 20px;
        .all {
            display: inline-block;
            padding: 15px 20px;
            background-color: #fff;
        }
        .list {
            margin-top: 10px;    
            .title {
                font-size: 14px;
                color: #999;
                margin: 10px 0;
            }
            .item {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;;
                p {
                    text-align: center;
                    padding: 14px 0;
                    background-color: #fff;
                    border-radius: 2px;
                }
            }
        }
    }
}
.active {
    background-color:rgb(54, 169, 98) !important;
    color: #fff;
}
</style>